<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Elements - Paper Bootstrap Wizard by Creative Tim</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
	<link href="../assets/css/paper-bootstrap-wizard.css" rel="stylesheet" />
    <link href="css/documentation.css" rel="stylesheet" />



    <!--  Fonts and icons     -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
    <link href="../assets/css/themify-icons.css" rel="stylesheet">
</head>

<body class="nude">



	<div class="header-wrapper">
	        <nav class="navbar navbar-transparent navbar-fixed-top" role="navigation">
	          <div class="container">
	            <!-- Brand and toggle get grouped for better mobile display -->
	            <div class="navbar-header">
	              <button id="menu-toggle" type="button" class="navbar-toggle">
	                <span class="sr-only">Toggle navigation</span>
	                <span class="icon-bar bar1"></span>
	                <span class="icon-bar bar2"></span>
	                <span class="icon-bar bar3"></span>
	              </button>
	              <a href="#">
	                   <div class="logo-container">
	                        <div class="logo">
	                            <img src="../assets/img/new_logo.png" alt="Creative Tim Logo">
	                        </div>
	                        <div class="brand">
	                            Creative Tim
	                        </div>
	                    </div>
	              </a>
	            </div>

	            <!-- Collect the nav links, forms, and other content for toggling -->
	            <div class="collapse navbar-collapse">
	              <ul  class="nav navbar-nav navbar-right">
	                    <li>
	                        <button onclick="window.location.href='https://github.com/timcreative/paper-bootstrap-wizard/issues'" id="issueButton" class="btn btn-simple btn-neutral">Have an issue?</button>
	                    </li>
	               </ul>

	            </div><!-- /.navbar-collapse -->
	          </div><!-- /.container-fluid -->
	        </nav>

	        <div class="header">
	            <div class="filter"></div>
	            <div class="title-container text-center">
	                    <h1>Paper Bootstrap Wizard</h1>
	                    <h3>Elements description</h3>
	            </div>
	        </div>
	</div>


	<div class="wrapper">
		<div class="main">
			<div class="section section-white">
		<div class="container">
		<div class="row">
			<div class="col-md-2">
				<div class="fixed-section">
					<ul>
						<li><a href="#buttons-row">Buttons</a></li>
						<li><a href="#checkbox-row">Checkbox</a></li>
						<li><a href="#inputs-row">Inputs</a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-8 col-md-offset-1">
				<div class="space-top"></div>
				<div class="tim-container">

		<!-- buttons row -->
		<div class="tim-row" id="buttons-row">
			<h2>Buttons</h2>
			<legend></legend>
			<h4>Colors</h4>
				<p>
				We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette:
				</p>
				<p>
				   <button class="btn btn-default">Default</button>
				   <button class="btn btn-primary">Primary</button>
				   <button class="btn btn-info">Info</button>
				   <button class="btn btn-success">Success</button>
				   <button class="btn btn-warning">Warning</button>
				   <button class="btn btn-danger">Danger</button>
				   <button class="btn btn-neutral">Neutral</button>

				</p>
				<br />
				<div class="area-line">
				<a data-target="#buttonColor" href="javascript: void(0);" data-toggle="collapse">
					  See Full Implementation
				</a>
	<div id="buttonColor" class="collapse">
	<pre class="prettyprint">
	&lt;button class=&quot;btn btn-default&quot;&gt;Default&lt;/button&gt;

	&lt;button class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;

	&lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;

	&lt;button class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;

	&lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;

	&lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;

	</pre>
	</div>
				</div>
			<h4>Sizes</h4>
				<p class="space-top">
					Buttons come in all needed sizes:
				</p>
				<p>
					<button class="btn btn-primary btn-lg">Large</button>
					<button class="btn btn-primary">Normal</button>
					<button class="btn btn-primary btn-sm">Small</button>
					<button class="btn btn-primary btn-xs">Extra Small</button>
				</p>
				<div class="area-line">
				<a data-target="#buttonSize" href="javascript: void(0);" data-toggle="collapse">
					  See Full Implementation
				</a>
	<div id="buttonSize" class="collapse">
	<pre class="prettyprint">
	&lt;button class=&quot;btn btn-primary btn-lg&quot;&gt;Large&lt;/button&gt;

	&lt;button class=&quot;btn btn-primary&quot;&gt;Normal&lt;/button&gt;

	&lt;button class=&quot;btn btn-primary btn-sm&quot;&gt;Small&lt;/button&gt;

	&lt;button class=&quot;btn btn-primary btn-xs&quot;&gt;Extra Small&lt;/button&gt;
	</pre>
	</div>
				</div>
			<h4>Styles</h4>
				<p class="space-top">
					We added extra classes that help you better customise the look. You can use regular buttons, filled buttons or plain link buttons. Let's see some examples:
				</p>
				<p>
					<button class="btn btn-primary">Default</button>
					<button class="btn btn-primary btn-fill">Filled</button>
					<button class="btn btn-primary btn-simple">Simple</button>
				</p>
				<div class="area-line">
				<a data-target="#buttonStyle" href="javascript: void(0);" data-toggle="collapse">
					  See Full Implementation
				</a>
	<div id="buttonStyle" class="collapse">
	<pre class="prettyprint">
	&lt;button class=&quot;btn btn-primary&quot;&gt;Default&lt;/button&gt;

	&lt;button class=&quot;btn btn-primary btn-fill&quot;&gt;Filled&lt;/button&gt;

	&lt;button class=&quot;btn btn-primary btn-simple&quot;&gt;Simple&lt;/button&gt;
	</pre>
	</div>
				</div>
				<p class="space-top">
					Button groups, toolbars, and disabled states all work like they are supposed to.
				</p>


		<!-- end buttons row -->
		</div>
		<!-- checkbox row -->
		<div class="tim-row" id="checkbox-row">
				<h2> Checkboxes</h2>
				<legend></legend>
				<p>
					The .active color will change depending on what color you will set on <strong>data-color = 'green'</strong>.
				</p>

				<div class="row">
					<div class="card wizard-card" data-color="green">
						<div class="col-sm-8 col-sm-offset-2">
							<div class="col-sm-4">
								<div class="choice" data-toggle="wizard-checkbox">
									<input type="checkbox" name="jobb" value="Design">
									<div class="card card-checkboxes card-hover-effect">
										<i class="ti-paint-roller"></i>
										<p>Design</p>
									</div>

								</div>
							</div>
							<div class="col-sm-4">
								<div class="choice" data-toggle="wizard-checkbox">
									<input type="checkbox" name="jobb" value="Code">
									<div class="card card-checkboxes card-hover-effect">
										<i class="ti-pencil-alt"></i>
										<p>Code</p>
									</div>

								</div>

							</div>
							<div class="col-sm-4">
								<div class="choice" data-toggle="wizard-checkbox">
									<input type="checkbox" name="jobb" value="Develop">
									<div class="card card-checkboxes card-hover-effect">
										<i class="ti-star"></i>
										<p>Develop</p>
									</div>

								</div>

							</div>
						</div>
					</div>
				</div>
				<p>Usage can be done via Data Attributes:
				<a data-target="#checkboxDataAttribute" href="javascript: void(0);" data-toggle="collapse">
						  See example.
				</a>
				</p>
		<div id="checkboxDataAttribute" class="collapse">
		<pre class="prettyprint">
&lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;card wizard-card&quot; data-color=&quot;green&quot;&gt;
		&lt;div class=&quot;col-sm-8 col-sm-offset-2&quot;&gt;
			&lt;div class=&quot;col-sm-4&quot;&gt;
				&lt;div class=&quot;choice&quot; data-toggle=&quot;wizard-checkbox&quot;&gt;
					&lt;input type=&quot;checkbox&quot; name=&quot;jobb&quot; value=&quot;Design&quot;&gt;
					&lt;div class=&quot;card card-radios card-hover-effect&quot;&gt;
						&lt;i class=&quot;ti-paint-roller&quot;&gt;&lt;/i&gt;
						&lt;p&gt;Design&lt;/p&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class=&quot;col-sm-4&quot;&gt;
				&lt;div class=&quot;choice&quot; data-toggle=&quot;wizard-checkbox&quot;&gt;
					&lt;input type=&quot;checkbox&quot; name=&quot;jobb&quot; value=&quot;Code&quot;&gt;
					&lt;div class=&quot;card card-radios card-hover-effect&quot;&gt;
						&lt;i class=&quot;ti-pencil-alt&quot;&gt;&lt;/i&gt;
						&lt;p&gt;Code&lt;/p&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class=&quot;col-sm-4&quot;&gt;
				&lt;div class=&quot;choice&quot; data-toggle=&quot;wizard-checkbox&quot;&gt;
					&lt;input type=&quot;checkbox&quot; name=&quot;jobb&quot; value=&quot;Develop&quot;&gt;
					&lt;div class=&quot;card card-radios card-hover-effect&quot;&gt;
						&lt;i class=&quot;ti-star&quot;&gt;&lt;/i&gt;
						&lt;p&gt;Develop&lt;/p&gt;
					&lt;/div&gt;

				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

		</pre>
		</div>



		</div>
		<!-- end row -->

		<!-- inputs row -->
        <div class="tim-row" id="inputs-row">
                <h2>Inputs </h2>
                <legend></legend>

                <p>
                We restyled the Bootstrap input to give it a different look. You can use the classic look, different colours and states or input groups. The default style for inputs is without borders, but if the colour inside the input is too close to your background, you can add the class 'border-input' to add a border to the input. If you want the input group to have a border, you should add the class 'border-input' both to the group and to the input.
                </p>
                <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                    	<input type="text" value="" placeholder="Input" class="form-control border-input" />
                	</div>
            	</div>
            	<div class="col-md-6">
            	    <div class="form-group has-success">
                        <input type="text" value="Success" class="form-control" />
                    </div>
            	</div>
        	</div>
                <div class="row">
                <div class="col-md-6">
                      <div class="form-group has-error has-feedback">
                        <input type="text" value="Error" class="form-control" />
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                      </div>
            	</div>
            	<div class="col-md-6">
                    	<div class="input-group border-input">
                          <input type="text" value="Group Addon" class="form-control border-input">
                          <span class="input-group-addon"><i class="fa fa-group"></i></span>
                        </div>
            	</div>
        	</div>
                <div class="area-line">
                <a data-target="#inputs" href="javascript: void(0);" data-toggle="collapse">See full implementation</a>
        <div id="inputs" class="collapse">
    <pre class="prettyprint">
    &lt;div class=&quot;form-group&quot;&gt;

        &lt;input type=&quot;text&quot; value=&quot;&quot; placeholder=&quot;Input&quot; class=&quot;form-control border-input&quot; /&gt;

    &lt;/div&gt;



    &lt;div class=&quot;form-group has-success&quot;&gt;

        &lt;input type=&quot;text&quot; value=&quot;Success&quot; class=&quot;form-control&quot; /&gt;

    &lt;/div&gt;



    &lt;div class=&quot;form-group has-error has-feedback&quot;&gt;

        &lt;input type=&quot;text&quot; value=&quot;Error&quot; class=&quot;form-control&quot; /&gt;

        &lt;span class=&quot;glyphicon glyphicon-remove form-control-feedback&quot;&gt;&lt;/span&gt;

    &lt;/div&gt;



    &lt;div class=&quot;input-group border-input&quot;&gt;

        &lt;input type=&quot;text&quot; value=&quot;Group Addon&quot; class=&quot;form-control border-input&quot;&gt;

        &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;fa fa-group&quot;&gt;&lt;/i&gt;&lt;/span&gt;

    &lt;/div&gt;
    </pre>
    </div>
                </div>
        </div>
    <!-- end row -->

			<!-- end container -->
			</div>
		</div>
		</div>
		</div>
		</div>
		</div>
		</div>

	<footer class="footer footer-black">
	    <div class="container">
	        <nav class="pull-left">
	            <ul>
	                <li>
	                    <a href="#">
	                        Creative Tim
	                    </a>
	                </li>
	                <li>
	                    <a href="http://blog.creative-tim.com">
	                       Blog
	                    </a>
	                </li>
	                <li>
	                    <a href="#/license">
	                        Licenses
	                    </a>
	                </li>
	            </ul>
	        </nav>
	        <div class="copyright pull-right">
	            &copy; <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by <a href="#">Creative Tim</a>. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
	        </div>
	    </div>
	</footer>
</body>
	<script src="../assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>

	<!--   plugins 	 -->
	<script src="../assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

	<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="../assets/js/jquery.validate.min.js"></script>

	<!--  methods for manipulating the wizard and the validation -->
	<script src="../assets/js/paper-bootstrap-wizard.js"></script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46172202-1', 'auto');
      ga('send', 'pageview');

    </script>

</html>
